import { useEffect, useState } from 'react'
import { withRouter, Link, useLocation  } from 'react-router-dom'
import { Layout, Breadcrumb } from 'antd'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
import Sidebar from '@/components/Sidebar'
import ContainerMain from '@/components/ContainerMain'
import HeaderSearch from '@/components/HeaderSearch'
import settings from '@/settings'
import '../../App.less'
import logo from '../../favicon.png'


const { Header, Content } = Layout

// 设置最小宽度992
const AppMain = () => {
  const initWidth = window.innerWidth || document.body.clientWidth
  const [isCollapse, setCollapse] = useState(initWidth <= settings.bootstrapWidth)
  const [curWidth, setCurWidth] = useState(initWidth)
  const changeSize = (e) => {
    setCollapse(e.target.innerWidth <= settings.bootstrapWidth)
    setCurWidth(e.target.innerWidth)
  }
  useEffect(() => {
    window.addEventListener('resize', changeSize)
    return () => {
      window.removeEventListener('resize', changeSize)
    }
  })

  const { pathname } = useLocation()
  useEffect(()=>{
    if (curWidth <= settings.bootstrapWidth) {
      setCollapse(true)
    }
  }, [pathname])

  return (
    <div>
      <Layout className="app">
        <Header className="header" style={{ position: 'fixed', zIndex: 101, width: '100%' }}>
          {
            (curWidth <= settings.bootstrapWidth) && <span style={{ fontSize: '24px', cursor: 'pointer', float: 'left' }} onClick={() => setCollapse(!isCollapse)}>
              {
                !isCollapse && <MenuFoldOutlined /> || <MenuUnfoldOutlined />
              }
            </span>
          }
          <Link to="/app/home"><img className="favicon" src={logo} alt="logo" /></Link>
          <HeaderSearch placeholder="请输入菜单名称" style={{ width: 200 }} />
          {/* <Link to="/"><img className="git" src={git} alt="git"/></Link> */}
          {/* <Menu theme="light" mode="horizontal" defaultSelectedKeys={['2']}>
            <Menu.Item key="1">nav 1</Menu.Item>
            <Menu.Item key="2">nav 2</Menu.Item>
            <Menu.Item key="3">nav 3</Menu.Item>
          </Menu> */}
        </Header>
        <Layout style={{ marginTop: 64 }}>
          {/* 左侧导航栏 */}
          {(curWidth <= settings.bootstrapWidth) && !isCollapse && <div className="sidebar-cover" onClick={()=>setCollapse(true)} />}
          <Sidebar isCollapse={isCollapse} setCollapse={setCollapse}></Sidebar>
          <Layout style={{ padding: '0 24px 24px', marginLeft: !(curWidth <= settings.bootstrapWidth) && settings.sideWidth || 0 }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>Home</Breadcrumb.Item>
              <Breadcrumb.Item>List</Breadcrumb.Item>
              <Breadcrumb.Item>App</Breadcrumb.Item>
            </Breadcrumb>
            <Content
              className="site-layout-background"
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
                overflow: 'initial'
              }}
            >
              <ContainerMain></ContainerMain>
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </div>
  )
}

export default withRouter(AppMain)
